<template>
	<view>
		<view class="aaa">
			<image src="../../static/img/logo.png" class="login_logo_img">
				<view class="aaa_text">
					请填写邀请码
				</view>
		</view>
		<view class="form_bc">
			<u--input placeholder="请输入您的手机号" border="surround" v-model="ipone"
				style="background-color: #f1f1f1;width: 75%;border-radius: 20px; margin: 0 auto;height: 35px;"></u--input>
			<u--input placeholder="请输入密码" border="surround" v-model="password"
				style="background-color: #f1f1f1;width: 75%;border-radius: 20px; margin: 20px auto;height: 35px;"></u--input>
			<u--input placeholder="请再次输入密码" border="surround" v-model="passwords"
				style="background-color: #f1f1f1;width: 75%;border-radius: 20px; margin: 20px auto;height: 35px;"></u--input>
			<view class="input_flex">
				<u--input placeholder="请输入验证码" border="surround" v-model="code"
					style="background-color: #f1f1f1;width: 75%;border-radius: 20px; margin: 0 auto;height: 35px;"></u--input>
				<view class="count_style" @click="yanzhengma">
					{{!count?'发送验证码': count + 's重新获取'}}
				</view>
			</view>
			<view class="dl_button" @click="dl_button">
				立即注册
			</view>
			<view class="vie">
				<view @click="passwordsa" class="vie_zh">密码登录</view>
				<view>
					<text class="vie_zh">还没有账号？</text>
					<text class="vie_zc">去注册</text>
				</view>
			</view>
			<view class="checked_button">
				<u-checkbox-group>
					<u-checkbox @change="checkboxChange"></u-checkbox>
					<text class="vie_zh">勾选表示同意</text>
					<text class="vie_zc">《服务协议》</text>
					<text class="vie_zh">与</text>
					<text class="vie_zc">《隐私政策》</text>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ipone: '',
				password: '',
				passwords: '',
				code: '',
				count: '',
				checked: '',
				inviter: '',
				recyclerType: ''
			}
		},
		onLoad(e) {
			console.log(e)
			this.recyclerType = e.recyclerType
			this.inviter = e.inviter
		},
		methods: {
			getCode() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					// this.yanzhengma();
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.count > 1 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.wan();
						}
					}, 1000)
				}
			},
			wan() {
				this.count = '';
				clearInterval(this.timer);
				this.timer = null;

			},
			yanzhengma() {
				if (this.count > 0) {
					return
				}
				if (this.ipone < 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return
				}
				this.$ajax('get', 'auth/sendSmsCode?phonenumber=' + this.ipone).then(res => {
					this.$api.msg('验证码已发送~')
					if (res.code == 200) {
						this.getCode()
					}
				})
			},
			passwordsa() {
				uni.navigateTo({
					url: './password'
				})
			},
			dl_button() {
				if (this.checked == true) {
					if (this.password == this.passwords) {
						if (this.ipone != '' & this.password != '' & this.passwords != '' & this.code != '') {
							this.$ajax('POST', 'auth/validateSmsCode', {
								phonenumber: this.ipone,
								smsCode: this.code
							}).then(res => {
								if (res.code == 200) {
									this.$ajax('POST', 'auth/register', {
										username: this.ipone,
										phonenumber: this.ipone,
										password: this.password,
										userType: 'app_recycler',
										recyclerType: this.recyclerType,
										inviter: this.inviter
									}).then(async res => {
										if (res.code == 200) {
											await uni.setStorageSync('key', res.data.access_token);
											this.$tokenKey()
										} else {
											this.$api.msg(res.message)
										}
									})
								} else {
									this.$api.msg(res.message)
								}
							})
						} else {
							uni.showToast({
								title: '请完整填写表单',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: '两次密码输入不一致',
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '请先勾选底部协议',
						icon: 'none'
					});
				}
			},
			checkboxChange(n) {
				this.checked = n
				console.log('change', this.checked);
			}
		}
	}
</script>

<style>
	page {
		background-image: url('../../static/img/bj.jpg');
		background-size: cover;
	}

	.input_flex {
		width: 80%;
		display: flex;
		align-items: center;
		margin: 20px auto;
	}

	.checked_button {
		position: fixed;
		bottom: 5%;
		left: 10%;
	}

	.vie {
		display: flex;
		justify-content: space-around;
	}

	.vie_zh {
		color: #a1a4a3;
	}

	.vie_zc {
		color: #56a5fa;
	}

	.dl_button {
		width: 80%;
		margin: 26px auto;
		background-color: #268dfe;
		font-size: 18px;
		color: #fff;
		text-align: center;
		height: 50px;
		line-height: 50px;
		border-radius: 30px;
	}

	.count_style {
		width: 100px;
		height: 25px;
		background-color: #358bff;
		color: #fff;
		padding: 10px;
		border-radius: 30px;
		text-align: center;
		line-height: 25px;
		margin-left: 20px;
		font-size: 14px;
	}

	.form_bc {
		width: 100%;
		margin-top: 50px;
	}

	.aaa {
		padding-top: 80px;
		height: 240px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.aaa_text {
		margin-top: 35px;
		font-size: 22px;
		font-weight: 500;
	}

	.login_logo_img {
		width: 100px;
		height: 100px;
	}

	.uni-input-input {
		background-color: 'red' !important;
	}
</style>